<!--  -->
<template>
<div class='goods-detail'>
    <div class="loading flex" v-if="isLoading">
        <img src="@/assets/loading.gif" alt="">
    </div>
    <!-- 头部 -->
    <div v-else>
    <div class="detail-header flex" ref="header" :style="'background: rgba(255, 255, 255, '+bgOpctioy+')'">
        <a href="#" class="iconfont icon-jiantou-copy" onclick="window.history.back()"></a>
        <div class="detail-tab" :style="'opacity:'+bgOpctioy">
            <ul class="flex">
                <li @click="changeTab(0)" :class="tabsIndex==0?'active':''">商品</li>
                <li @click="changeTab(1)" :class="tabsIndex==1?'active':''">评论</li>
                <li @click="changeTab(2)" :class="tabsIndex==2?'active':''">详情</li>
                <li @click="changeTab(3)" :class="tabsIndex==3?'active':''">推荐</li>
            </ul>
        </div>
        <a href="#" class="iconfont icon-jushoucang"></a>
    </div>
    <!-- 轮播图 -->
    <div id='detail_0'>
    <div class="swiper-box">
        <mt-swipe :auto="4000" @change="handleChange" :showIndicators="false">
            <mt-swipe-item v-for="value in detailData.gallery_list" :key="value.img_id">
            <img :src="value.thumb_url" alt>
            </mt-swipe-item>
            
        </mt-swipe>
        <div class="dots">
                <strong>{{currentSwiper}}</strong>/
                <span>{{detailData && detailData.gallery_list && detailData.gallery_list.length}}</span>
        </div>
    </div>
    <!-- 商品价格商品简介 -->
    <div class="detail-content">
        <div class="detail-price flex-sp">
            <div class="price flex">
                <div class="shop-price">￥{{detailData.shop_price}}</div>
                <div class="market-price">￥{{detailData.marketPrice}}</div>
                <div class="saled">已售{{detailData.sales_volume}}件</div>
            </div>
            <div class="detail-share" @click="showPoster">
                <i class="iconfont icon-fenxiang1"></i>
                <div>分享</div>
            </div>
        </div>
    </div>
    <!--商品服务  -->
    <div class="shop-middle">
        <div class="flex-sp shop-middle-box"  @click="selectBuy">
            <div class="flex">
                <h4 class="left-text">已选</h4>
                <div>1</div>
            </div>
            <div>
                <i class="iconfont icon-xiaojiantou"></i>
            </div>
        </div>
        <div class="flex-sp shop-middle-box" @click="addressShow">
            <div class="flex">
                <h4 class="left-text">送至</h4>
                <div>{{provinces}}-{{city}}-{{area}}</div>
            </div>
            <div>
                <i class="iconfont icon-xiaojiantou"></i>
            </div>
        </div>
        <div class="flex-sp shop-middle-box">
            <div class="flex">
                <h4 class="left-text">运费</h4>
                <div class="pink-age">包邮</div>
            </div>
            <div>
                <i class="iconfont icon-xiaojiantou"></i>
            </div>
        </div>
        <div class="flex-sp">
            <div class="flex">
                <h4 class="left-text">服务</h4>
                <div class="flex">
                    <i class="iconfont icon-faxian"></i>
                    <div>不支持7天无理由退货</div>
                </div>
            </div>
            <div>
                <i class="iconfont icon-xiaojiantou"></i>
            </div>
        </div>
    </div>
    </div>
    <!-- 评论 -->
    <div id="detail_1" class="detail-discuss">
        <h2>评论</h2>
        <div>我是评论</div>

    </div>
    <div id="detail_2" class="detail-goods">
        <h2>详情</h2>
        <div>我是详情</div>

    </div>
    <div id="detail_3" class="detail-recommond">
        <h2>推荐</h2>
        <div>我是推荐</div>

    </div>
    <div class="detail-footer flex">
        <div class="service">
            <i class="iconfont icon-wode"></i>
            <div>客服</div>
        </div>
        <div class="service">
            <i class="iconfont icon-gouwuche"></i>
            <div>购物车</div>
        </div>
        <div class="addcar-btn">加入购物车</div>
        <div class="buy-btn">立即购买</div>
    </div>
    <!-- 购物车弹窗 -->
    <div class="selcct-buy">
        <mt-popup
        v-model="popupVisible"
        position="bottom">
        <div class="goods-wrap">
            <div class="goods-img">
                <img src="https://x.dscmall.cn/storage/images/202201/goods_img/1279_copy_0_G_1642458971297.jpg" alt="">
            </div>
            <div class="flex-top">
            <div>
                <div class="shop-title">商品</div>
                <div class="shop-price">88</div>
                <div class="flex">
                    <div>库存：1000</div>
                    <div>编号：001</div>
                </div>
            </div>
            <i class="iconfont icon-guanbi2"></i>
            </div>
        </div>
        <div class="num-wrap flex-sp">
            <h3>数量</h3>
            <div class="num flex">
                <a href="#" @click="buyNum>1?buyNum--:1">-</a>
                <input type="text" v-model="buyNum">
                <a href="#" @click="buyNum++">+</a>
            </div>

        </div>
        <div class="buy-footer flex">
            <div class="addcar-btn" @click="addCar">加入购物车</div>
            <div class="buy-btn">立即购买</div>
        </div>
        
       
     </mt-popup>
    </div>
    <!-- 地址弹窗 -->
    <div class="address">
        <mt-popup v-model="addressPopupVisible"
        position="bottom">
        <div class="title">
            <div>配送至</div>
            <i class="iconfont icon-guanbi2" @click="closeAddress"></i>
         </div>
            <mt-picker :slots="slots" @change="onValuesChange"></mt-picker>
        </mt-popup>
         
    </div>
    <!-- 分享的弹窗 -->
    <div class="share">
        <!--  -->
        <mt-popup
            v-model="sharePopupVisible"
            position="bottom">
            <div class="flex-sp">
                <div class="send-friend" v-if="isWeixin" @click="showSendFriendFun(1)">发送给好友</div>
                <div class="create-poster" @click="showSendFriendFun(2)">生成海报</div>
            </div>
       </mt-popup>
    </div>

    <send-friend v-if="showsendFrined" @closeFrine='closeFriendPop'></send-friend>
    <create-poster v-if="showPosterCanvas" :posterMessage="posterMessage"></create-poster>

    </div>
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import city from '@/mock/city.json'
import imgUrl from '@/assets/0_thumb_G_1490175270619.jpg'
import { isWeixin } from '@/utils/tool.js'
import sendFriend from './components/sendFriend'
import createPoster from './components/createPseter'
let provinceArr = [];

city.provinces.province.forEach(item=>{
    provinceArr.push(item.ssqname)
})
console.log('provinceArr',provinceArr)
export default {
//import引入的组件需要注入到对象中才能使用
components: {sendFriend,createPoster},
data() {
//这里存放数据
return {
    swiperData:[
         {
        id:'2',
        pic:'https://x.dscmall.cn/storage/data/gallery_album/177/original_img/177_P_1597978394783.jpg'
    },
        {
        id:'1',
        pic:'https://x.dscmall.cn/storage/data/gallery_album/177/original_img/177_P_1597978395241.jpg'
    }
   
    
    ],
    posterMessage:{
        goods_img:imgUrl,
        goods_name:'商品名字商品名字商品名字商品名字商品名字商品名字商品名字商品名字商品名字',
        goods_price:'1999'
    },
    currentSwiper:1,
    swiperLength:'',
    bgOpctioy:0,
    tabsIndex:0,
    popupVisible:false,//控制购物车弹窗的
    buyNum:1,
    addressPopupVisible:false,//地址弹窗
    slots: [
        {
          flex: 1,
          values: provinceArr,
          className: 'slot1',
          textAlign: 'right'
        }, {
          divider: true,
          content: '-',
          className: 'slot2'
        }, {
          flex: 1,
          values: ['市辖区','市辖县'],
          className: 'slot3',
          textAlign: 'left'
        },
        {
          divider: true,
          content: '-',
          className: 'slot4'
        }, {
          flex: 1,
          values: ['东城区', '西城区', '崇文区', '宣武区', '朝阳区', '丰台区', '石景山区', '海淀区', '门头沟区', '房山区', '通州区', '顺义区', '昌平区', '大兴区', '平谷区', '怀柔区'],
          className: 'slot5',
          textAlign: 'left'
        }
      ],
      provinces:'请选择',
      city:'请选择',
      area:'请选择',
      sharePopupVisible:false,
      isWeixin:isWeixin(),
      showsendFrined:false,//这个是发给朋友
      showPosterCanvas:false,//海报
    //   isLoading:true//是否显示loading
    //   detailData:''
};
},
//监听属性 类似于data概念
computed: {
    detailData(){
        return this.$store.state.detailData
    },
    isLoading(){
        return this.$store.state.isLoading
    }
},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
handleChange(index){
    this.currentSwiper = index+1
},
scroolDetailPage(){
    let oTop = document.documentElement.scrollTop;
     console.log(oTop);
    let op = oTop/100;
    if(op>=1){
        this.bgOpctioy=1
    }else{
        this.bgOpctioy = op
    }
    // 获取头部高度
    let headHeight = this.$refs.header.offsetHeight;
    let detailArr = [];
    detailArr.push(document.getElementById('detail_0'));
    detailArr.push(document.getElementById('detail_1'))
    detailArr.push(document.getElementById('detail_2'))
    detailArr.push(document.getElementById('detail_3'))
    // console.log('detailArr',detailArr)
    // console.log('window',window)
    // 遍历数组的方法 reduce() some() every() foreach() find()...
    let {scrollY} = window;//解构赋值Y轴滚动距离
    detailArr.reduce((sum,currentDetail,index)=>{
        // sum 和 如果没有初始值则取数组的第一项如果有则取定义的初始值
        //currentDetail当前元素
        // index
        if(sum){
            return sum
        }
        if(scrollY+headHeight<currentDetail.offsetHeight+currentDetail.offsetTop){
            console.log('index',index)
            this.tabsIndex = index;
            sum =true
        }
        return sum
    },0)
},
 changeTab(index){
    this.tabsIndex = index;
    console.log('index',index)
    // window.scrollBy()方法可把内容滚动指定的像素数。
    let detail = document.querySelector("#detail_" + index);
    console.log('距离',detail.offsetTop);
    let oTop = detail.offsetTop- window.scrollY - this.$refs.header.offsetHeight;
    window.scrollBy({
        top:oTop,
        behavior:'smooth'
    })
 },
//  购物车弹窗
 selectBuy(){
    this.popupVisible = true
 },
//  点击加入购物车
addCar(){
     let carlist = {
        // 店铺所需要的字段
        // 店铺id
        ru_id:this.detailData.ru_id,
        // 店铺名称
        rz_shopName:this.detailData.rz_shopName,
        // 是否选中  自定义字段
        isShopSelect:true,
        children:[
            {
                // 商品所需要的字段
            goods_id:this.detailData.goods_id,
            //商品id 
            // 商品名称
            goods_name:this.detailData.goods_name,
            // 商品图片
            goods_thumb:this.detailData.goods_thumb,
            // 商品价格
            shop_price:this.detailData.shop_price,
            // 购买数量  自定义字段
            buyNum:this.buyNum,
            // 是否选中  自定义字段
            isSelect:true,
                ru_id:this.detailData.ru_id,
            }
        ]
    }
    this.$store.commit('addCarListData',carlist)

  
},
// 地址弹窗
 addressShow(){
    this.addressPopupVisible = true
 },
 onValuesChange(picker, values) {
     console.log('picker',picker)
      console.log('values',values)
      let provinces = city.provinces.province;
      let cityArr = [];
    //   市的数据
      for(let i=0;i<provinces.length;i++){
        if(values[0]==provinces[i].ssqname){
            for(let j=0;j<provinces[i].cities.city.length;j++){
                cityArr.push(provinces[i].cities.city[j].ssqname)
            }
        }
      }
      console.log(cityArr,'cityArr')
      picker.setSlotValues(1,cityArr)
    //   区县
    let areaArr =[]
    for(let i=0;i<provinces.length;i++){
        if(values[0]==provinces[i].ssqname){
            for(let j=0;j<provinces[i].cities.city.length;j++){
               if(values[1]==provinces[i].cities.city[j].ssqname){
                    for(let k=0;k<provinces[i].cities.city[j].areas.area.length;k++){
                        areaArr.push(provinces[i].cities.city[j].areas.area[k].ssqname)
                    }
               }
            }
        }
      }
      console.log('areaArr',areaArr)
        picker.setSlotValues(2,areaArr)
        this.provinces = values[0]
        this.city = values[1]
        this.area = values[2]

},
//关闭弹窗
closeAddress(){
    this.addressPopupVisible = false
},
// 打开分享弹窗
showPoster(){
    this.sharePopupVisible = true
},
// 发送给好友
showSendFriendFun(num){
    if(num==1){//发送好友
         this.showsendFrined = true
        this.sharePopupVisible = false
    }else{
        this.showPosterCanvas = true;
         this.sharePopupVisible = false
    }
   
},
closeFriendPop(data){
    this.showsendFrined = data
}
},
beforeCreate() {}, //生命周期 - 创建之前
//生命周期 - 创建完成（可以访问当前this实例）
created() {
    this.swiperLength =  this.swiperData.length
    this.$store.dispatch('actChangeDetailData',{goods_id:this.$route.params.goods_id})
    console.log('this',this)
    // if(this.$store.state.detailData){
    //     this.detailData = this.$store.state.detailData
    //     this.isLoading = false
    // }else{
    //     this.isLoading = true
    // }
    

    
},
beforeMount() {}, //生命周期 - 挂载之前
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {
    console.log('1111111111111111111')
    document.addEventListener('scroll',this.scroolDetailPage)
},
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {
    document.removeEventListener('scroll',this.scroolDetailPage)
}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发

}
</script>
<style lang="less">
.goods-detail{
    .loading{
        position: fixed;
        top:0;
        left:0;
        background: #fff;
        z-index:9999;
        width:100%;
        height:100%;
        img{
            width:5rem;
            height:5rem;
        }
    }
    .detail-header{
        height: 4.4rem;
        width:100%;
        position: fixed;
        
        top: 0;
        left: 0;
        z-index:99;
        a{
        width:10%;
      }
      .detail-tab{
        width:70%;
        .active{
            color:#ff534c;
            
        }
      }
      li{
        flex:1
      }
    }
    .swiper-box{
        width:100%;
        height: 37.5rem;
        position: relative;
        img{
            width:100%;
            height: 100%;
        }
        .dots{
            position: absolute;
            right: 0;
            bottom:2rem;
            background-color: rgba(41,47,54,.4);
            border-top-left-radius: 1rem;
            border-bottom-left-radius: 1rem;
            min-width: 5rem;
            height: 2.5rem;
            line-height: 2.5rem;
            text-align: center;
            color: #fff;
            font-size: 1.4rem;
        }
    }
    // 商品内容
    .detail-content{
        width:100%;
        background-color: #fff;
        padding: 1rem 1rem;
        box-sizing: border-box;
        .detail-price{
            .price{
                .shop-price{
                    font-size: 2.4rem;
                    color:#ff534c;
                    margin-right:1rem
                }
                .market-price{
                    color: #666;
                    font-size: 1.4;
                    text-decoration: line-through;
                    margin-right:1rem
                }
                .saled{
                   color: #666;
                    font-size: 1.4;
                    margin-right:1rem
                }

            }
            .detail-share{
                text-align: center;
            }
        }
    }
    // 商品服务
    .shop-middle{
        width:100%;
        background-color: #fff;
        padding: 1rem 1rem;
        box-sizing: border-box;
        margin-top:1rem;
           .left-text{
            margin-right:1.5rem
        }
        .shop-middle-box{
            margin-bottom:1.2rem;
         
        .pink-age{
           
            color:rgb(175, 116, 58)
        }
        }
        
        
    }
    // 评论
    .detail-discuss{
        background-color: blue;
        height: 100rem;
        width: 100%;
        color: #fff;

    }
    .detail-goods{
        background-color: yellow;
        height: 150rem;
        width: 100%;
        color: #fff;

    }
    .detail-recommond{
        background-color: green;
        height: 80rem;
        width: 100%;
        color: #fff;
    }
    // 底部
    .detail-footer{
        position: fixed;
        left:0;
        bottom: 0;
        background-color: #fff;
        width:100%;
        height:4.9rem;
        padding: 1rem 1rem;
    box-sizing: border-box;
    .service{
        text-align: center;
        flex:1;
    }
    .addcar-btn{
        background-color: #ffc707;
        width:12.5rem;
        height:4.2rem;
        line-height: 4.2rem;
        color: #fff;
        text-align: center;
        padding: 0 0.5rem;
        box-sizing: border-box;
        border-radius: 3rem;
        flex:2
    }
    .buy-btn{
        background-color: #ff534c;
        width:12.5rem;
        height:4.2rem;
        line-height: 4.2rem;
        color: #fff;
        text-align: center;
        padding: 0 0.5rem;
        box-sizing: border-box;
         border-radius: 3rem;
         margin-left: 0.5rem;
         flex:2
    }
    }
    //购物车弹窗
    .selcct-buy{
        .mint-popup{
            height:30rem;
            width:100%;
            border-top-left-radius: 2rem;
            border-top-right-radius: 2rem;
        .goods-wrap{
            width:calc(100% - 2rem);
            height:12rem;
            padding: 1.5rem 1rem;
            display: flex;
            img{
                width:9rem;
                height: 9rem;
            }
            .flex-top{
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                flex:1;
                .shop-title{
                font-size: 1.5rem;
                line-height: 2rem;
                height: 4rem;
                overflow: hidden;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
            }
            .shop-price{
                font-size: 2rem;
                color:#ff534c;
            }
            }
            
        }
        .num-wrap{
            height: 5rem;
            width:calc(100% - 2rem);
            margin: 0 1rem;
            h3{
                font-size: 1.6rem;
            }
            .num{
                height: 3rem;
                a{
                    display: block;
                    width: 3rem;
                    height: 3rem;
                    background-color: #fff;
                    text-align: center;
                    line-height: 3rem;
                }
                input{
                    width: 6rem;
                    height: 3rem;
                    border: 1px solid #efefef;
                    text-align: center;
                }
            }

        }
        .buy-footer{
            height: 4.4rem;
            width: calc(100% - 2rem);
            margin: 0 1rem;
            position: absolute;
            bottom: 0;
            left: 0;
            div{
                flex: 1;
                height: 4.4rem;
                border-radius: 2rem;
                font-weight: bold;
                text-align: center;
                line-height: 4.4rem;

            }
            .addcar-btn{
                background-color: #ffc707;
                color: #fff;
                
             }
            .buy-btn{
                background-color: #ff534c;
                color: #fff;
            }
        }
        }
    }
    // 地址弹窗
    .address{
        .mint-popup{
            width: 100%;
            height: 50rem;
             border-top-left-radius: 2rem;
            border-top-right-radius: 2rem;
            .title{
                height: 4.4rem;
                position: relative;
                div{
                    width:100%;
                    height: 4.4rem;
                    line-height: 4.4rem;
                    position: absolute;
                    top: 0;
                    left:0;
                    text-align: center;
                }
                i{
                   width:4.4rem;
                    height: 4.4rem;
                    line-height: 4.4rem;
                    position: absolute;
                    top: 0;
                    right:0;
                    text-align: center;
                }
            }
        }
    }
    // 分享弹窗
    .share{
        .mint-popup{
            height: 4.4rem;
            width:100%;
            .flex-sp{
                div{
                    flex:1;
                    height:4.4rem;
                    text-align: center;
                    line-height: 4.4rem;
                    color:#fff;
                }
                .send-friend{
                    background: #ffc707;
                }
                .create-poster{
                    background:#ff534c;
                }
            }
        }

    }
    
}
</style>